<template>
    <section
        :style="{
            paddingTop: itemConfig.paddingTop + 'px',
            paddingBottom: itemConfig.paddingBottom + 'px',
            marginTop: itemConfig.marginTop + 'px',
            marginBottom: itemConfig.marginBottom + 'px',
            background: `linear-gradient(
                ${itemConfig.bgEdg}deg,
                ${itemConfig.bgColorOne},
                ${itemConfig.bgColorTow},
                ${itemConfig.bgColorThree})`
        }"
    >
        <div class="max-w-[1200px] m-auto px-5">
            <div
                v-if="itemConfig.title || itemConfig.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: itemConfig.headerBottom + 'px' }"
            >
                <h3
                    v-if="itemConfig.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: itemConfig.titleColor }"
                >{{ itemConfig.title }}</h3>

                <p
                    v-if="itemConfig.intro"
                    class="text-center text-lg"
                    :style="{ color: itemConfig.introColor }"
                >{{ itemConfig.intro }}</p>
            </div>

            <div
                v-for="(item, index) in (itemData as itemDataType[])"
                :key="index"
                class="rounded-xl"
                :style="{
                    backgroundColor: item.bgColor,
                    borderRadius: item.brRadius + 'px',
                    padding: item.padding + 'px'
                }"
            >
                <img
                    :src="appStore.toAbsoluteUrl(item.url)"
                    class="max-w-full max-h-full"
                    alt="img"
                />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import useAppStore from '~/stores/app'

interface itemConfigType {
    title: string;
    intro: string;
    paddingTop: number;
    paddingBottom: number;
    marginTop: number;
    marginBottom: number;
    headerBottom: number;
    bgEdg: number;
    bgColorOne: string;
    bgColorTow: string;
    bgColorThree: string;
    titleColor: string;
    introColor: string;
}

interface itemDataType {
    url: string;
    bgColor: string;
    padding: number;
    brRadius: number;
}

withDefaults(
    defineProps<{
        itemConfig?: itemConfigType,
        itemData?: itemDataType[]
    }>(),
    {
        itemConfig: {} as itemConfigType | any,
        itemData: [] as itemDataType[] | any
    }
)

const appStore = useAppStore()
</script>
